import React, { FC } from 'react';
import { menuConfigFull } from '@/config/menuConfig';
import _ from 'lodash';
import classnames from 'classnames';

interface itemProps {
  id: string;
  title: string;
}

const MenuIndex: FC = () => {
  const liClick: (item: itemProps) => void = (item) => {
    window.location.hash = '#' + item.id;
  };
  const hash = window.location.hash.substr(1) || 'home';
  return (
    <>
      <ul className="menu-index">
        {_.map(menuConfigFull, (item, key) => {
          return (
            <li
              onClick={() => liClick(item)}
              key={item.id}
              className={classnames({
                active: item.id === hash,
              })}
            >
              {item.title}
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default MenuIndex;
